<template>
  <div class="calendar-top">
    <div class="data-select">
      <!-- 年份选择 -->
      <select v-model="currentYear">
        <option :value="item" v-for="item in years" :key="item">{{ item }}年</option>
      </select>
      <!-- 月份选择 -->
      <span @click="lastMonth"> &lt; </span>
      <select v-model="currentMonth">
        <option :value="item" v-for="item in months" :key="item">{{ item }}月</option>
      </select>
      <span @click="nextMonth"> &gt; </span>
    </div>

    <div class="today">
      <!-- 今日按钮 -->
      <button @click="backToday">今日</button>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { storeToRefs } from 'pinia';
import { useCalendarStore } from '@/stores/calendar'
import { createYears, createMonths } from '@/utils'

// 获取本地状态
const { currentYear, currentMonth } = storeToRefs(useCalendarStore())
const {lastMonth, nextMonth,backToday} = useCalendarStore()
console.log(currentYear, currentMonth.value)
const years = ref([])
const months = ref([])
// 初始化本地状态
onMounted(() => {
  years.value = createYears()
  months.value = createMonths()
})
</script>

<style lang="scss" scoped>
.calendar-top {
  display: flex;
  justify-content: space-around;
  height: 70px;
  padding: 10px;
  background-color: #e7e9f1;
  border-radius: 16px 16px 0 0;
  .data-select {
    color: #333;
    select {
      padding: 4px 10px;
      border: 1px solid #eee;
      border-radius: 6px;
    }
    span {
      user-select: none;
      cursor: pointer;
    }
  }
  .today {
    button {
      padding: 4px 20px;
      border: none;
      background-color: #fff;
      border-radius: 6px;
      &:hover {
        background: rgba(78, 110, 242, 0.1);
        color: #4e6ef2;
        cursor: pointer;
      }
    }
  }
}
</style>